<template>
  <view class="detailItem" @tap="handlerNavTo" :style="{marginBottom:params.margin+'rpx'}">
    <view class="detailItem-box" :class="params.margin !== 0 ? 'noBored ' : ''">
      <view class="title">{{ params.title }}</view>
      <view class="val"  v-if="params.valColor" :style="{color:params.valColor}">{{ params.val===2?'休息中':'营业中' }}</view>
      <view class="val" v-if="!params.valColor">{{ params.val }}</view>
      <image src="/static/little-more.png" v-if="params.more" class="more" mode="widthFix"></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      mgStyle:{
        marginBottom:`0rpx`,
      },
      clStyle:{
        color:``,
      }
    }
  },
  props: {
    params: {
      type: Object,
      default: () => {}
    }
  },
  created() {
    console.log(this.params),
    this.mgStyle.marginBottom=`${this.params.margin}rpx`
    if(this.params.valColor){
      this.clStyle.color=this.params.valColor
    }
  },
  methods: {
    handlerNavTo() {
      if (this.params.more) {
        if(this.params.params){
            return this.$utils.common.navigateTo(this.params.url,this.params.params)
        }
        return this.$utils.common.navigateTo(this.params.url)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.noBored {
  border: none !important;
}
.detailItem {
  background-color: #ffffff;
  &-box {
    border-bottom: 1rpx solid rgba(230, 230, 230, 1);
    position: relative;
    padding: 30rpx 0;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0 32rpx;
    .more {
      width: 18rpx;
      margin-left: 16rpx;
    }
    .val {
		    width: 50vw;
		    text-align: right;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
	  overflow: hidden;
	  height: 40rpx;
	  text-overflow:ellipsis;
	  white-space: nowrap;
    }
    .title {
      position: absolute;
      left: 0;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: rgba(80, 80, 80, 1);
    }
  }
}
</style>
